<template>
	<view class="page mine-password">
		<nav-bar back>修改密码<button class="confirm" @click="onSubmit()">完成</button></nav-bar>
		<view class="main">
			<view class="tip">
				请设置密码，你可以用自己的用户名+密码登录。
			</view>
			<view class="account">
				<span>账号</span><span>{{userStore.userInfo.userName}}</span>
			</view>
			<uni-forms ref="form" :modelValue="formData" type="line" :label-width="80">
				<uni-forms-item label="原密码" name="oldPassword">
					<uni-easyinput class="input" :inputBorder="false" type="password" v-model="formData.oldPassword"
						placeholder="填写原密码" />
				</uni-forms-item>
				<uni-forms-item label="新密码" name="newPassword">
					<uni-easyinput class="input" :inputBorder="false" type="password" v-model="formData.newPassword"
						placeholder="填写新密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="confirmPassword">
					<uni-easyinput class="input" :inputBorder="false" type="password" v-model="formData.confirmPassword"
						placeholder="再次填写确认" />
				</uni-forms-item>
			</uni-forms>
			<!-- <button class="bottom-btn" type="primary" @click="onSubmit()">提交</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					oldPassword: "",
					newPassword: "",
					confirmPassword: ""
				},
				rules: {
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入原密码',
						}]
					},
					newPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码',
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (data.confirmPassword != data.newPassword) {
									callback("两次输入的密码不一致");
								}
								if (data.newPassword == data.oldPassword) {
									callback("新密码不能和原密码一致");
								}
								return true;
							}
						}]
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入确认密码',
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (data.confirmPassword != data.newPassword) {
									callback("两次输入的密码不一致");
								}

								return true;
							}
						}]
					}

				}
			}
		},
		mounted() {
			console.log(this.userStore.userInfo.userName);
		},
		methods: {
			onSubmit() {
				this.$refs.form.validate().then(res => {
					this.$http({
						url: "/modifyPwd",
						method: "PUT",
						data: this.formData
					}).then((res) => {
						uni.showToast({
							title: "修改密码成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		}

	}
</script>

<style scoped lang="scss">
	.page {

		// background-color: #fff;
		.title {
			button {
				position: absolute;
				color: #fff;
				background-color: #07c160;
				right: 20rpx;
				bottom: 10rpx;
				padding: 0;
				font-size: 30rpx !important;
				width: 120rpx;
				line-height: 60rpx;
			}
		}

		.main {
			padding: 40rpx;

			.tip {
				color: #afafaf;
				font-size: 28rpx;
			}

			.account {
				display: flex;
				color: #afafaf;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #ccc;
				margin: 30rpx 0;
				align-items: center;

				span:first-child {
					width: 160rpx;
				}
			}

			::v-deep .uni-easyinput__content {
				border-bottom: 1rpx solid #ccc !important;
				background-color: $im-bg !important;
			}
		}
	}
</style>